require(['config'],()=>{
    require(['pAjax'],()=>{
        class Index{
            constructor(){
                this.ul = document.querySelector('#shopping')
                this.span = document.querySelector('.text9')
                this.init()
            }
            init(){
                this.request()       
                this.totalNum()
            }
            request(){
                //发送请求
               pAjax({url:'/api/goods.json'}) 
               .then(data=>{
                   //json数据转成js
                //    console.log(data);
                   let res = JSON.parse(data)
                   //数据太多太大，截取20条渲染页面
                    res = res.slice(0,24) 
                    // console.log(res);
                    this.render(res)
               })
            }
            //渲染页面
            render(data){
            //     //hide 多行省略
                data.forEach(item=>{
                    this.ul.innerHTML +=
                     `
                   <li>
                    <a href="html/detail.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                    <div class="pic">
                        <img src="${item.img_small_logo}">
                    </div>
                    <p class="title hide">${item.title}</p>
                    </a>
                    <div class="jiage">
                    <span class="price"> <i>￥</i>${item.price}</span>
                    <button data-id=${item.goods_id}>加入购物车</button>
                    </div>
                    
                </li> 
                    `               
                })
                this.bindHtml(data)
            }
            // 绑定点击事件，用事件委派
            bindHtml(data){
                this.ul.onclick = (e)=>{
                    let target = e.target || e.srcElement
                    if(target.nodeName == 'BUTTON'){
                        //获取对应点击按钮的id
                        let id = target.dataset.id - 0
                       let goods = data.find(item=>{return item.goods_id ==id})
                       console.log(goods);
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    if(!list.length){
                        list.push(goods)
                        goods.cart_number = 1
                    }else{
                        let res = list.some(item=>{return item.goods_id ==id})
                        if(res){
                            let index = list.findIndex(item=>{return item.goods_id ==id})
                            list[index].cart_number++
                        }else{
                            list.push(goods)
                            goods.cart_number = 1
                        }
                    }
                    
                    localStorage.setItem('cart', JSON.stringify(list))
                    this.totalNum()
                    }
                }
            }
        totalNum(){
            let list = JSON.parse(localStorage.getItem('cart')) || []
            let num = 0
            list.forEach(item=>{
                num += item.cart_number
            })
            this.span.innerHTML = num
        }
        
            
        }
        new Index()
    })
})